<template>
  <AuFormModal
    ref="formModalRef"
    v-model="showModal"
    :title="title"
    :formList="formList"
    :formData="selfFormData"
    :modalProps="{
      width: 460
    }"
    :formProps="{
      class: '!w-[396px]'
    }"
    @handleConfirm="handleConfirm"
  />
</template>

<script setup lang="ts">
import { AuFormModal } from "@/components/AuModal";
import { computed, nextTick, onMounted, ref, watch } from "vue";
import { cloneDeep } from "lodash-unified";
import { ElMessage } from "element-plus";
import {
  taskVersionAdd,
  taskVersionGetList,
  TaskVersionProp,
  taskVersionUpd
} from "@/api/expiry/task";
import { useI18n } from "vue-i18n";

const { t } = useI18n();

interface Props {
  modelValue: boolean;
  formData: TaskVersionProp;
}

const props = defineProps<Props>();

const emits = defineEmits(["update:modelValue", "confirm"]);
const title = ref("");
const showModal = computed({
  get() {
    return props.modelValue;
  },
  set(value) {
    emits("update:modelValue", value);
  }
});

const formList = ref([
  {
    type: "input",
    key: "name",
    label: "task_manage.form.name",
    placeholder: "task_manage.form.enter_name",
    required: true
  },
  {
    type: "select",
    key: "copyVersion",
    label: "task_manage.form.copy",
    placeholder: "task_manage.form.select_copy_version",
    labelKey: "name",
    valueKey: "id",
    columns: []
  },
  // {
  //   type: "select",
  //   key: "publishStatus",
  //   label: "task_manage.form.status",
  //   placeholder: "task_manage.form.select_status",
  //   labelKey: "label",
  //   valueKey: "value",
  //   options: [
  //     {
  //       value: 0,
  //       label: "task_manage.form.sold_out"
  //     },
  //     {
  //       value: 1,
  //       label: "task_manage.form.putaway"
  //     }
  //   ],
  //   defaultValue: 1
  // },
  {
    type: "input",
    key: "note",
    label: "table.note",
    placeholder: "task_manage.form.enter_note",
    inType: "textarea"
  }
]);
const selfFormData = ref({});
const businessList = ref([]);
const formModalRef = ref();

const handleConfirm = async (data: any) => {
  let service = taskVersionAdd;
  if (data?.id) {
    service = taskVersionUpd;
  }
  const res = await service(data);
  if (res.code == 200) {
    ElMessage({
      message: data?.id
        ? t("task_manage.form.edit_success")
        : t("task_manage.form.add_success"),
      type: "success"
    });
    emits("update:modelValue", false);
    emits("confirm");
  }
};

const getVersionList = async () => {
  const res = await taskVersionGetList({ size: 0 });
  formModalRef.value.setFormProps("copyVersion", { options: res.data });
};

watch(
  () => [props.modelValue, props.formData],
  ([val, row]) => {
    if (val) {
      const rowData = cloneDeep(row) as TaskVersionProp;
      title.value = rowData?.id
        ? t("task_manage.form.edit_version")
        : t("task_manage.form.add_version");
      if (rowData?.id) {
        nextTick(() => {
          formModalRef.value.setFormData(row);
          formModalRef.value.setFormProps("copyVersion", { hidden: true });
        });
      } else {
        nextTick(() => {
          getVersionList();
        });
      }
    } else {
      formModalRef.value.reset();
    }
  }
);
</script>
